async function defineComponentProps() {
    let compId
    try {
      compId = VueElement.id
    } catch(e) {
      compId = 'map3'
    }
  
    /* var center = {
      南京市: [118.767413, 32.041544],
      无锡市: [120.301663, 31.574729],
      徐州市: [117.184811, 34.261792],
      常州市: [119.946973, 31.772752],
      苏州市: [120.619585, 31.299379],
      南通市: [120.864608, 32.016212],
      连云港市: [119.178821, 34.600018],
      淮安市: [119.021265, 33.597506],
      盐城市: [120.139998, 33.377631],
      扬州市: [119.421003, 32.393159],
      镇江市: [119.452753, 32.204402],
      泰州市: [119.915176, 32.484882],
      宿迁市: [118.275162, 33.963008],
    }; */
    TempSources.compId = compId
    TempSources.timer = null
    TempSources.geoJson = null
   // TempSources.center = center
    TempSources.actions = [
          "click",
          "dblclick",
          "mousedown",
          // "mousemove",
          "mouseup",
          // "mouseover",
          "mouseout",
          "globalout",
          // "contextmenu",
      ];
  
    console.log('defineComponentProps',  JSON.stringify(TempSources))
  
    const componentProps = {}
    option = {
      backgroundColor: '',
      tooltip: {
          show: true,
          background: "rgba(0,0,0,.5)",
          textStyle: {
            color: "rgb(0,0,0)",
            fontSize: 12,
            fontFamily: "Courier New",
          },
          formatter: "{a}: {b}",
        },
      geo: [
          {
            show: false,
            map: compId,
          },
        ],
      series: [
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          z: 5,
          data: [],
          symbolSize: 14,
          label: {
            normal: {
              show: true,
              formatter: function (params) {
                return (
                  "{fline|地点：" +
                  params.data.city +
                  "}\n{tline|" +
                  (params.data.info || "发生xx集件") +
                  "}"
                );
              },
              position: "top",
              backgroundColor: "rgba(254,174,33,.8)",
              padding: [0, 0],
              borderRadius: 3,
              lineHeight: 32,
              color: "#f7fafb",
              rich: {
                fline: {
                  padding: [0, 10, 10, 10],
                  color: "#ffffff",
                },
                tline: {
                  padding: [10, 10, 0, 10],
                  color: "#ffffff",
                },
              },
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            color: "#feae21",
          },
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          z: 5,
          data: [],
          symbolSize: 14,
          label: {
            normal: {
              show: true,
              formatter: function (params) {
                return (
                  "{fline|地点：" +
                  params.data.city +
                  "}\n{tline|" +
                  (params.data.info || "发生xx集件") +
                  "}"
                );
              },
              position: "top",
              backgroundColor: "rgba(233,63,66,.9)",
              padding: [0, 0],
              borderRadius: 3,
              lineHeight: 32,
              color: "#ffffff",
              rich: {
                fline: {
                  padding: [0, 10, 10, 10],
                  color: "#ffffff",
                },
                tline: {
                  padding: [10, 10, 0, 10],
                  color: "#ffffff",
                },
              },
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            color: "#e93f42",
          },
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          z: 5,
          data: [],
          symbolSize: 14,
          label: {
            normal: {
              show: true,
              formatter: function (params) {
                return (
                  "{fline|地点：" +
                  params.data.city +
                  "}\n{tline|" +
                  (params.data.info || "发生xx集件") +
                  "}"
                );
              },
              position: "top",
              backgroundColor: "rgba(8,186,236,.9)",
              padding: [0, 0],
              borderRadius: 3,
              lineHeight: 32,
              color: "rgba(255,255,255,1)",
              rich: {
                fline: {
                  padding: [0, 10, 10, 10],
                  color: "#ffffff",
                },
                tline: {
                  padding: [10, 10, 0, 10],
                  color: "#ffffff",
                },
              },
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            color: "#08baec",
          },
        },
        //地图
        {
          name:"名称",
          type: "map",
          mapType: compId,
          roam: false,
          zoom: 1,
          label: {
            show: true,
            color: "rgba(255,255,255,1)",
            fontSize: 12,
            fontFamily: 'Microsoft YaHei',
            emphasis: {
              color: "#000",
              fontSize: 16,
              fontFamily: "Courier New",
            },
          },
          itemStyle: {
            normal: {
                areaColor: "#003669",
                borderColor: "#3fdaff",
                borderWidth: 2,
                shadowColor: "rgba(63, 218, 255,0.6)",
                shadowBlur: 35,
            },
            emphasis: {
              areaColor: "#FA8C16",
              borderWidth: 0,
            },
          },
          /*
          data: Object.keys(center).map((name) => {
            return {
              name: name,
              value: Math.random() * 100,
            };
          }),
          */
        },
      ],
    };
  
    componentProps.options = option;
     componentProps.mapInfo = {
      name: '广州'
    }
  
    // 返回组件属性 
    return componentProps
  }
  
  // 组件创建前
  async function defineComponentBeforeCreated() {
    console.log('defineComponentBeforeCreated',  TempSources)
    let mapUrl = COMP_DIR + "/map/guangzhou.geojson"
    let getMapJson = function () {
      return fetch(mapUrl).then(res => res.json())
    }
    TempSources.geoJson = await getMapJson()
    echarts.registerMap(TempSources.compId, TempSources.geoJson);
  }
  
  // 组件创建后
  async function defineComponentCreated({ VueInstance, VueElement }) {
  
    if (VueElement && VueInstance) {
      if (TempSources.compId) {
        echarts.registerMap(TempSources.compId, TempSources.geoJson)
        VueInstance.options.geo[0].map = TempSources.compId
        VueInstance.options.series[3].map = TempSources.compId
      } else {
        echarts.registerMap(TempSources.compId, TempSources.geoJson)
      }
  
      const myChart = VueInstance.getEChartInstance();
    function registerEvents(actions) {
      actions.forEach((action) => {
        myChart.on(action, function (params) {
          let paramsData = params.data === undefined ? params.name : params.data
          EventPublisher.publish('map_event',{
            mapType: 'echartsMap',
            mapid: TempSources.compId,
            action,
            data: paramsData
          })
          if (action === 'click') {}
        });
      });
    }
    registerEvents(TempSources.actions);
    }
     
  
    TempSources.timer = setInterval(() => {
      myChart = VueInstance.getEChartInstance()
      for (var i = 0; i < 3; i++) {
        VueInstance.options.series[i].data = [];
      }
      var cityIndex = Math.floor(Math.random() * 13);
      var runidx = Math.floor(Math.random() * 3);
      var coordCity = Object.keys(TempSources.center)[cityIndex];
      var coord = TempSources.center[coordCity];
      VueInstance.options.series[runidx].data = [
        {
          city: coordCity,
          value: coord,
        },
      ];
      myChart.setOption(VueInstance.options, true);
    }, Math.floor(Math.random() * 10000) + 1000);
    
  
  }
  
  // 组件销毁
  async function defineComponentDestroy() {
    if (TempSources.timer) {
      clearInterval(TempSources.timer)
    }
  }
  
  async function handleDataCallback({
    ResourceData,
    VueInstance,
  }) {
    if (VueInstance) {
      let mapGeoJsonData = ResourceData
      echarts.registerMap(VueInstance.options.geo[0].map, mapGeoJsonData);
       VueInstance.updateOptions(VueInstance.options);
    }
  }